<template>
  <div class="page-service-group">
    <Breadcrumb separator=">">
      <BreadcrumbItem href="/home/environment"><i class="ivu-icon ivu-icon-home"></i> 环境中心</BreadcrumbItem>
      <BreadcrumbItem :href="'/home/environment/' + serviceGroup.environmentId" :title="'环境(' + envName + ')'"><i class="ivu-icon ivu-icon-aperture"></i> {{envName}}</BreadcrumbItem>
      <BreadcrumbItem :title="'服务组(' + serviceGroup.name + ')'">{{serviceGroup.name}}</BreadcrumbItem>
    </Breadcrumb>

    <h4 class="zl-title">基本信息</h4>
    <div class="environment-info">
      <Spin fix v-if="infoLoading"></Spin>
      <div class="environment-info-box" v-else>
        <Row :gutter="10">
          <Col span="8" class="f-nowrap"><span class="info-title">名称：</span>{{serviceGroup.name}}</Col>
          <Col span="12" class="f-nowrap"><span class="info-title">创建时间：</span>{{serviceGroup.createTime}}</Col>
          <Col span="8" class="f-nowrap"><span class="info-title">容器数：</span>{{serviceGroup.containerCount}}</Col>
          <Col span="8"><span class="info-title">服务数：</span>{{serviceGroup.serviceCount}}</Col>
        </Row>
      </div>
    </div>

    <!-- 服务列表 -->
    <h4 class="zl-title">服务列表
      <div class="fr">
        <search placeholder="搜索服务" @change="searchService"></search>
        <Button type="primary" @click="addService" class="button-add"> <i class="iconfont icon-plus"></i> <span class="button-name">添加服务</span> </Button>
      </div>
    </h4>
    <div class="zl-page-loading" v-if="tableLoading">
      <Spin class="zl-page-loading" fix></Spin>
    </div>
    <Table :columns="columns" :data="serviceList" class="service-table" v-else></Table>

    <!-- 新增弹窗 -->
    <service-add-modal :visible.sync="serviceAddVisible" @finish="addServiceDone"></service-add-modal>

  </div>
</template>

<script>
  import Search from '@/components/search'
  import ServiceAddModal from '@/components/add-service/modal'
  import Fetch from '@/api/request'
  export default {
    name: 'service-group',
    components: {Search, ServiceAddModal},
    data() {
      return {
        serviceGroup: {},
        envName: '',
        serviceList: [],
        columns: [{
          title: '启用状态',
          align: 'center',
          width: 80,
          render: (h, params) => {
            let cls = 'zl-badge'
            if (params.row.status !== 'active') {
              cls = 'zl-badge badge-error'
            }
            return h('div', {
              class: [cls]
            }, '')
          }
        }, {
          title: '服务名称',
          width: 160,
          render: (h, params) => {
            return h('span', {
              class: 'zl-link',
              on: {
                click: () => {
                  this.serviceDetail(params.row)
                }
              }
            }, params.row.id)
          }
        }, {
          title: '镜像地址',
          key: 'image'
        }, {
          title: '容器数',
          key: 'replicas',
          width: 70
        }, {
          title: '创建时间',
          key: 'creationTimestamp',
          width: 180
        }, {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                  }
                }
              }, '操作')
            ])
          }
        }],
        serviceAddVisible: false,
        infoLoading: true,
        tableLoading: true
      }
    },
    mounted() {
      this.envName = this.$route.params.environmentId
      this.init()
    },
    methods: {
      // 添加服务成功，刷新服务列表
      addServiceDone() {
        this.services()
      },
      // 初始数据
      init() {
        this.info()
        this.services()
      },
      // 获取服务组信息
      info(params) {
        Fetch.get({
          url: '/api/serviceGroup/info',
          params: {
            groupId: this.$route.params.serviceGroup,
            environmentId: this.$route.params.environmentId
          }
        }).then((res) => {
          if (res && res.code === '0') {
            this.serviceGroup = res.data
          } else {
            this.$Message.warning({
              content: res.message || '服务器内部错误',
              duration: this.DURATION
            })
          }
          this.infoLoading = false
        }).catch((err) => {
          this.infoLoading = false
          this.$Message.error({
            content: err.$Message,
            duration: this.DURATION
          })
        })
      },
      services() {
        Fetch.get({
          url: '/api/serviceGroup/services',
          params: {
            groupId: this.$route.params.serviceGroup,
            environmentId: this.$route.params.environmentId
          }
        }).then((res) => {
          if (res && res.code === '0') {
            this.serviceList = res.data
          } else {
            this.$Message.warning({
              content: res.message || '服务器内部错误',
              duration: this.DURATION
            })
          }
          this.tableLoading = false
        }).catch((err) => {
          this.tableLoading = false
          this.$Message.error({
            content: err.$Message,
            duration: this.DURATION
          })
        })
      },
      // 服务详情
      serviceDetail(service) {
        localStorage.setItem('serviceGroup', this.serviceGroup.name)
        this.$router.push('/home/environment/' + this.$route.params.environmentId + '/' + this.$route.params.serviceGroup + '/' + service.id)
      },
      // 添加服务组
      addService() {
        this.serviceAddVisible = true
      },
      // 根据名称搜索服务组
      searchService(search) {
        let temp = []
        this.serviceGroup.serviceList.forEach((service) => {
          if (service.id.indexOf(search) !== -1) {
            temp.push(service)
          }
        })
        this.serviceList = temp
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .environment-info {
    position: relative;
    min-height: 100px;
  }
  .environment-info-box {
    line-height: 32px;
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #eee;
  }
  .button-add {
    .iconfont:hover {
      color: #fff;
    }
  }
  .service-table {
    margin-top: 20px;
    margin-bottom: 50px;
  }
</style>
